<template>
	<div class="layout-container">
		<el-button class="addButton" size="large" @click="addAccount">新增账号</el-button>
		<!-- 表单 -->
		<el-table class="layout-table" border :data="tableData">
			<el-table-column type="index" prop="index" label="序号" width="80px" align="center"></el-table-column>
			<el-table-column prop="userName" label="姓名" align="center"></el-table-column>
			<el-table-column prop="phone" label="手机号" align="center"></el-table-column>
			<el-table-column prop="roleName" label="角色" align="center"></el-table-column>
			<el-table-column prop="hospitalName" label="所属医院" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<el-button size="small" class="editButton" @click="resetPassword(scope.row.id)">重置密码</el-button>
					<el-button size="small" class="editButton" @click="EditAccount(scope.row.id)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination class="layout-page" :page-sizes="[10]" background
			layout="prev, pager, next, sizes, jumper, total," :total="total" v-model:current-page="data.pageNum"
			v-model:page-size="data.pageSize" @current-change="getAccountList(data)" @size-change="changePages">
		</el-pagination>
		<!-- 点击显示对话框 -->
		<Add v-model="showAdd" :showAdd="showAdd" @confirm="addOk" @cancle="addCancle"></Add>
		<!-- 编辑 -->
		<Edit :showEdit="showEdit" v-model="showEdit" :disabled="disabled" :id="EditId" @confirm="EditOk"
			@cancle="EditCancle">
		</Edit>
		<!-- 重置密码 -->
		<ResetPsd :resetId="resetId" v-model="showResPsd" :showResPsd="showResPsd" @confirm="resetPsdOK"
			@cancle="resetPsdCancle"></ResetPsd>
	</div>

</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { reqAccountList } from '@/api/account';
import Add from './Add.vue';
import Edit from './Edit.vue';
import ResetPsd from './resetPsd.vue';
import { useStore } from 'vuex';
const store = useStore();

const showAdd = ref(false);
const showEdit = ref(false);
const showResPsd = ref(false);
const tableData = ref([]);
const total = ref(0);
// 设置手机号禁用
const disabled = ref(true);

// 获取医院列表参数
const data = reactive({
	"pageNum": 1,
	"pageSize": 10,
})

// 定义获取账号信息列表
const getAccountList = async (data: any) => {
	try {
		const res: any = await reqAccountList(data);
		if (res.data.code === 0) {
			total.value = JSON.parse(res.data.result.total);
			tableData.value = res.data.result.records;
		}
	} catch (error) {
		console.log(error);
	}
}
// 切换分页
const changePages = () => {
	data.pageNum = 1;
	getAccountList(data);
}

onMounted(() => {
	store.commit('updateTitle', '访问控制');
	getAccountList(data);
})
// 新增账号
const addAccount = () => {
	showAdd.value = true;
}

// 新增确定
const addOk = () => {
	addCancle();
	getAccountList(data);
}
// 新增取消
const addCancle = () => {
	showAdd.value = false;
}
// 重置密码
const resetId = ref('');
const resetPassword = async (id: any) => {
	showResPsd.value = true;
	resetId.value = id;
	console.log('aaa', resetId.value);
}

// 编辑账号
const EditId = ref('');
const EditAccount = (id: any) => {
	// console.log("获取编辑账号id", id);
	EditId.value = id;
	showEdit.value = true;
}
// 编辑确定
const EditOk = () => {
	EditCancle();
	getAccountList(data);
}
// 编辑取消
const EditCancle = () => {
	showEdit.value = false;
}
// 重置密码确定
const resetPsdOK = (value:any) => {
	resetPsdCancle(value);
}
// 重置取消
const resetPsdCancle = (value:any) => {
	showResPsd.value = value;
}
</script>
<style lang="scss" scoped>
.layout-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: end;

	.addButton {
		width: 100px;
		border: 1px solid $base-table-fontColor;
		color: $base-table-fontColor;
	}

	// 表单
	.layout-table {
		width: 100%;
		margin: 20px 0px 20px;

		.editButton {
			border: 0px;
			color: $base-table-fontColor;
		}

	}

	// 分页
	.layout-page {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 20px;
	}
}
</style>